<template>

  <el-dialog title="批量上传" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">

    <el-form ref="main-form" :model="form" label-width="80px">
      <el-form-item label="文件" size="mini" prop="file">
        <el-upload
          class="upload-demo"
          ref="upload"
          :limit="1"
          :multiple="false"
          :action="uploadUrl"
          :headers="uploadHeaders"
          :auto-upload="false"
          :file-list="file"
          :on-change="handleFileChange"
          :on-success="handleFileUpload">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">
            <p>上传注意事项:</p>
            <p>1.上传文件为txt类型，<span style="color: red;">字符编码utf8</span></p>
            <p>2.文件内容:流水号,模板类型</p>
            <p>3.模板类型：1.虚拟商户持卡人回访模板 2.正品商户持卡人回访模板 3.拒付订单持卡人回访模板 4.日语订单持卡人回访模板 5.社交网站持卡人回访模板</p>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small" :loading="loading">提 交</el-button>
    </div>

  </el-dialog>

</template>

<script>

import util from '@/libs/util.js';

export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {
      dialogVisible: false,
      loading: false,
      uploadUrl: util.getUploadUrl('trademailcallback/upload'),
      uploadHeaders: util.getUploadHeader(),
      form: {},
      file: [],
    }
  },

  mounted () {
  },

  methods: {

    show () {
      this.file = []
      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    submit() {
      if (this.file.length == 0) {
        this.$message({message: '请选择文件', type: 'error'});
        return
      }
      this.loading = true;
      this.$refs.upload.submit();
    },

    handleFileChange (file, fileList) {
      this.file = fileList
    },

    handleFileUpload (res, file) {
      this.loading = false;
      if (res.code != 0) {
        this.$message({message: res.message, type: 'error'});
      } else {
        if (res.data == [] || res.data == '') {
          this.$message({message: '上传成功', type: 'success'});
        } else {
          this.$alert(res.data, '上传完成提示', {
            confirmButtonText: '确定'
          });
        }
      }
      this.$refs.upload.clearFiles()
      this.close()
      console.log(res, file)
    }
  }
}

</script>

<style lang="scss">
.el-upload__tip {
  p {
    line-height: 20px;
    margin: 5px 0;
  }
}
</style>